
<template>
  <div>
    <el-button type="primary" @click="open1()" class="h-b">物业费缴纳</el-button>
    <el-button type="primary" @click="open2()" class="p-b">车位费缴纳</el-button>

    <img src="./pic/p.jpg" class="p-jpg">
    <img src="./pic/h.jpg" class="h-jpg">



    <el-dialog v-model="readorder" title="物业费缴纳" :before-close="close1" class="dialog1">
      <template #footer>
        <div class="div3">
          <p>姓名:{{tableData2.name}}</p>
        </div>
        <span>
          <el-button @click="hexpense(),showhexpense()">确认信息</el-button>
        <el-button @click="close1">关闭</el-button>

      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="readorder1" title="车位费缴纳" :before-close="close1" class="dialog1">
      <template #footer>
        <div class="div3">
          <p>姓名:{{tableData2.name}}</p>
        </div>
        <span>
          <el-button @click="open3()">绑定车位</el-button>
          <el-button @click="open4(),showhexpense()">查看详情</el-button>
        <el-button @click="close1">关闭</el-button>

      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="readorder2" title="当前状态" :before-close="close2" class="dialog1">
      <div >
        <p>姓名:{{tableData3.uname}}</p>
      </div>
      <div >
        <p>缴费:100元</p>
      </div>
      <div >
        <p>内容:{{tableData3.hstatue == '1' ? "未缴费" : tableData3.hstatue == '2' ? "已缴费" :''}}</p>
      </div>
      <el-button @click="pay()">确认信息</el-button>
      <el-button @click="close1">关闭</el-button>
    </el-dialog>


    <el-dialog v-model="readorder3" title="输入车辆信息" :before-close="close2" class="dialog1">
      <div >
        <el-form-item label="车辆型号 " class="input1">
          <el-input v-model="cartype"></el-input>
        </el-form-item>
        <el-form-item label=" 车牌号码 " class="input1">
          <el-input v-model="carnum"></el-input>
        </el-form-item>
        <div>
          <input
              type="file"
              id="idd"
              name="image"
              class="getImgUrl_file"
              @change="shangc($event)"
              accept="image/jpg, image/jpeg, image/png"
          />
          <!--        <br/>-->
          <!--        <img :src="picPath" alt="">-->
          <tr>
            <th>姓名</th>
            <th>初次领证日期</th>
          </tr>
          <tr  v-if="Data" v-for="item in Data"  >
            <td>{{item.姓名.words}}</td>
            <td>{{item.初次领证日期.words}}</td>
          </tr>
        </div>
      </div>
      <el-button @click="bindingcar()">确认信息</el-button>
      <el-button @click="close1">关闭</el-button>
    </el-dialog>

    <el-dialog v-model="readorder4" title="当前状态" :before-close="close2" class="dialog1">
      <div >
        <p>姓名:{{tableData3.uname}}</p>
      </div>
      <div >
        <p>缴费:100元</p>
      </div>
      <div >
        <p>内容:{{tableData3.cstatue == '1' ? "未缴费" : tableData3.cstatue == '2' ? "已缴费" :''}}</p>
      </div>
      <el-button @click="pay()">确认信息</el-button>
      <el-button @click="close1">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "OrderHistory",
  data(){
    return{
      Data:[],
      data:[],
      tableData:[
      ],
      tableData3: {
        uname:'',
        hstatue:'',
        cstatue:'',
      },
      readorder:false,
      readorder1:false,
      readorder2:false,
      readorder3:false,
      readorder4:false,
      // pay:false,
      // pay1:false,
      action: {},
      goods: {},
      user: {},
      cartype:'',
      carnum:'',

    }
  },

  methods:{
    formatData(row, column, cellValue, index){

      //把传过来的日期进行回炉重造一下，又创建了一个js的 Date对象，进行重新构造，转为String字符串
      //最终返回 s 就可以了
      var s =	new Date(cellValue).toLocaleString();
      return s;
    },
    getUser() {
      request.get("http://localhost:8082/user/getUserInfo").then(res => {
        if (res.flag) {
          this.user = res.data
          this.userChange = res.data
          this.tableData2 = res.data
          console.log('1',this.tableData2)
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message.error(res.msg)
          this.account = ''
          this.password = ''
        }
      })
    },
    hexpense(){
      request.get("http://localhost:8082/user/hexpense?id="+this.tableData2.id+"&uid="+this.tableData2.id+"&carid="+this.tableData2.id+"&uname="+this.tableData2.name).then(res => {
        this.readorder2=true;
        // if (res.flag) {
        //   this.$message({
        //     type: 'success',
        //     message: res.msg
        //   });
        // } else {
        //   this.$message.error(res.msg);
        // }
      })
    },
    showhexpense(){
      request.get("http://localhost:8082/user/showhexpense?id="+this.tableData2.id).then(res => {
        if (res.flag) {
          this.tableData3 = res.data;
          console.log('ghh',this.tableData3);
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    bindingcar(){
      request.get("http://localhost:8082/user/bindingcar?id="+this.tableData2.id+"&cartype="+this.cartype+"&carnum="+this.carnum).then(res => {
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    getOrders() {
      request.get("http://localhost:8082/order/viewOrders").then(res => {
        if (res.flag) {
          this.tableData = res.data['order2s']
          this.user = res.data['user']
          this.$message({
            type: 'success',
            message: res.msg
          });
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    shangc(e) {
      let files = document.getElementById("idd").files[0];
      let name = document.getElementById("idd").files[0].name;
      // this.picPath=document.getElementById("idd").value

      let arr = name.split(".");
      let fileSize = 0;
      let fileMaxSize = 10240; //1M
      if (files) {
        fileSize = files.size;
        if (fileSize > 10 * 1024 * 1024) {
          alert("文件大小不能大于10M！");
          file.value = "";
          return false;
        } else if (fileSize <= 0) {
          alert("文件大小不能为0M！");
          file.value = "";
          return false;
        }
      } else {
        return false;
      }
      //转码base64
      let reader = new FileReader();
      let imgFile;
      // let that = this
      reader.readAsDataURL(files);
      reader.onload = async e => {
        imgFile = e.target.result;
        let arr = imgFile.split(",");
        this.faceBase64 = arr[1];
        this.picPath='data:image/jpg;base64,'+arr[1]
        console.log(imgFile)
        const params = new FormData(); // 声明formData数据类型
        params.append("image", imgFile); //图片base64
        params.append("access_token", '24.e517edb5976943a9240f76080b4e7c2f.2592000.1714650122.282335-59429161'); //access_token
        request.post("/baiduApi/rest/2.0/ocr/v1/driving_license", params, {
          headers: {
            "Content-Type": "application/x-www-form-undefined",
          },
        })
            .then((res) => {
              this.Data.push(res.words_result);
            });
        console.log('111',this.Data);
      };
    },
    open1(){
      this.readorder=true;
    },
    open2(){
      this.readorder1=true;
    },
    open3(){
      this.readorder3=true;
    },
    open4(){
      this.readorder4=true;
    },
    pay(){
      window.open("http://localhost:8082/alipay/pay?subject="+'物业费'+"&traceNo="+this.tableData.id+"&totalAmount="+100);
    },
    // pay1(data){
    //   this.action = data.action
    //   this.goods = data.goods
    //   const name=encodeURI(this.goods.name)
    //   window.open("http://localhost:8083/union/orderpay?goodsName="+this.name+"&orderNumber="+this.action.trade_no+"&txnAmt="+this.goods.price);
    //
    // },
    Showorder(data){
      this.action = data.action
      this.goods = data.goods
      this.readorder=true;
    },
    close1() {
      this.readorder = false;
      this.readorder1 = false;
      this.readorder2 = false;
      this.readorder3 = false;
      this.readorder4 = false;
    },
  },

  created() {
    this.getOrders()
    this.getUser()
  }
}
</script>

<style scoped>
.div2{
  background-size: 100% ;
  float: left;
  margin-top: -200px;
}
.b3{
  margin-bottom: 20px;
}
.dialog1{
  z-index: 2;
}
.p-jpg{
  position: absolute;
margin-top: 100px;
  margin-left: 100px;
  width: 300px;
  height: 300px;
}
.h-jpg{
  position: absolute;
  margin-top: 100px;
  margin-left: 500px;
  width: 300px;
  height: 300px;
}
.h-b{
  position: absolute;
  margin-top: 404px;
  margin-left: 600px;
}
.p-b{
  position: absolute;
  margin-top: 404px;
  margin-left: 200px;
}
</style>



